{% extends 'layout/basic.html' %}
{% load static %}
{% block title %}
    DATA
{% endblock %}
{% block css %}
    <style>

        .container {
            display: flex;
        }

        .left-column {
            flex: 1;
        {#align-content: center;#}{#width: 400px;#}{#height: 300px;#}{#background-color: lightgray;#} position: relative;
        }

        .right-column {
            flex: 1;
            width: 50%;
            position: relative;
        }

        .box1 {
            width: 350px;
            height: 300px;
            position: absolute;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 5% 5% 5% 5%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* 添加立体感的阴影效果 */
        }

        .box2 {
            width: 300px;
            height: 180px;
            position: absolute;
            top: 95%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid rgba(0, 0, 0, 0.1); /* 使用更轻的边框颜色 */
            background-color: antiquewhite;
            padding: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 增加更明显的投影效果 */
        }


        .box3 {
            border-radius: 10% 10% 10% 10%;
            height: 450px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* 添加立体感的阴影效果 */

        }


        textarea {
            border: none;
            outline: none; /* 去除点击后的黑色边框 */
            resize: none; /* 禁止调整文本区域大小 */
            background-color: transparent; /* 使背景图案可见 */
            width: 100%;
            height: 100%;
        }

        /* 按钮样式 */
        button#updateSummary {
            padding: 10px 20px;
            background-color: #3498db;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 增加立体感的阴影效果 */
            transform: translateY(0); /* 默认状态 */
            transition: transform 0.2s ease-in-out; /* 添加平滑过渡效果 */
        }

        /* 当鼠标悬停在按钮上时，按钮稍微向上浮动 */
        button#updateSummary:hover {
            transform: translateY(-2px); /* 微调向上浮动的距离 */
        }

        /* 当鼠标点击按钮时，按钮稍微向下浮动 */
        button#updateSummary:active {
            transform: translateY(2px); /* 微调向下浮动的距离 */
        }

        .box3 p {
            position: absolute;
            left: 50%;
            transform: translateX(-50%); /* 居中对齐 */
            bottom: 1%;
        }

        .box1 p {
            text-align: center; /* Center the text horizontally */
            position: absolute;
            bottom: 0; /* Position the text at the bottom of the .box1 */
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 10px; /* Add some margin between the chart and the text */
        }
    </style>
{% endblock %}
{% block js %}
    <script src="{% static "plugins/echars/echarts.min.js" %}"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var data24Chart = echarts.init(document.getElementById('data24'));
        var day24TasksName = []
        var taskNameStr = "{{ day24TasksName }}"
        day24TasksName = taskNameStr.split(',')
        var day24TasksTime = []
        day24TasksTime =
        {{ day24TasksTime }}
        var pieData = []
        for (var i = 0; i < day24TasksName.length; i++) {
            pieData.push({value: day24TasksTime[0], name: day24TasksName[i]})
        }
        // 指定图表的配置项和数据
        var option1 = {
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '80%',
                    data: pieData,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        data24Chart.setOption(option1);
        var data7dayChart = echarts.init(document.getElementById('data7day'));
        var weekTimeArr = {{weekTime}}
            console.log(weekTimeArr)
        var option2 = {
            xAxis: {
                type: 'category',
                data: ['6天前', '5天前', '4天前', '3天前', '2天前', '1天前', '今天']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: weekTimeArr,
                    type: 'line'
                }
            ]
        };
        $(function () {
            updateSummary();
        })

        function updateSummary() {
            $('#updateSummary').click(function () {
                console.log("select me clicked")
                const csrfToken = $('[name=csrfmiddlewaretoken]').val();
                $.ajax({
                    url: '{% url 'updateSummary' %}', // 修改项目的后端URL
                    type: 'POST',
                    data: {'newSummary': $("#summary").val()},
                    dataType: 'JSON',
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader('X-CSRFToken', csrfToken);
                    },
                    success: function (res) {
                        if (res.status) {
                            // 修改成功，刷新页面
                            location.reload();
                        } else {
                            $.each(res.error, function (key, value) {
                                // 处理错误信息
                                $("#id_" + key).next().text(value[0]);
                            });
                        }
                    }
                });
            })
        }

        data7dayChart.setOption(option2);
    </script>
{% endblock %}
{% block content %}
    <div class="container">
        <div class="left-column">
            <!-- 左边第一个div的内容 -->
            <div class="box1">
                <div id="data24" style="width: 350px;height:300px;"></div>
                <p>24小时</p>
            </div>
            <div class="box2">
                <h4>当日总结：</h4>
                <!-- 左边第二个div的内容 -->
                <textarea id="summary">{{ dayDes }}</textarea>
                <button id="updateSummary">更新该日总结</button>
            </div>
        </div>
        <div class="right-column">
            <div class="box3">
                <!-- 右边的div的内容 -->
                <div id="data7day" style="width: 100%;height:450px;"></div>
                <p>最近七天学习时长</p>
            </div>
        </div>
    </div>
{% endblock %}
